@include('admin.header')
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="/admin">首页</a>
        <a href="">商品管理</a>
        <a>
          <cite>商品列表</cite></a>
      </span>
      <a id="reflash" class="layui-btn layui-btn-primary layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:38px">ဂ</i></a>
    </div>
    <div class="x-body">
      <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
          <input class="layui-input start" autocomplete="off" placeholder="开始日" name="start" id="start">
          <input class="layui-input end" autocomplete="off" placeholder="截止日" name="end" id="end">
          <div class="layui-input-inline">
            <select name="classify_id" lay-filter="classify_id">
              <option value="">选择分类</option>
              @foreach($cat as $v)
                <option value="{{$v->classify_id}}">{{$v->classify_name}}</option>
              @endforeach
            </select>
          </div>
          <!-- <div class="layui-input-inline">
            <select name="contrller">
              <option>支付方式</option>
              <option>支付宝</option>
              <option>微信</option>
              <option>货到付款</option>
            </select>
          </div>
          <div class="layui-input-inline">
            <select name="contrller">
              <option value="">订单状态</option>
              <option value="0">待确认</option>
              <option value="1">已确认</option>
              <option value="2">已收货</option>
              <option value="3">已取消</option>
              <option value="4">已完成</option>
              <option value="5">已作废</option>
            </select>
          </div> -->
          <input type="text" name="good_name"   placeholder="请输入商品名称" autocomplete="off" class="layui-input good_name">
          <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
        </form>
      </div>
      <xblock>
        <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
        <button class="layui-btn" onclick="x_admin_show('添加商品','/admin/add_good')"><i class="layui-icon"></i>添加</button>
        <span class="x-right" style="line-height:40px" id="count"></span>
      </xblock>
      <div class="list">
      <!-- 这里放请求回来的数据 -->
        
      </div>

    </div>
    <div class="alert">
      提示信息
    </div>
    <style>
      .alert{
        position: fixed;
        width: 280px;
        height: 50px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 9999;
        color: #fff;
        text-align: center;
        line-height: 50px;
        font-size: 16px;
        display: none;
      }
    </style>
    <script>
      layui.use('laydate', function(){
        var laydate = layui.laydate;
        
        //执行一个laydate实例
        laydate.render({
          elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
          elem: '#end'
        });
      });
      
      /*商品-删除*/
      function member_del(obj,id){
          layer.confirm('确认要删除吗？',function(index){
            // console.log(id);
              //发异步删除数据
              $.ajax({
                type:'get',
                url:"{{url('/admin/todo_delgood')}}",
                data:'good_id='+id,
                dataType:'json',
                success:function(res){
                  if (res.code==1) {
                    getGoodData(1,window.layui.form);
                    getCount();
                    layer.msg(res.msg,{icon:1,time:1000});
                  }else{
                    layer.msg(res.msg,{icon:1,time:1000});
                  }
                }
            })
          });
      }
      /*批量操作*/
      function delAll () {
        var arr = $("input[name='id[]']");
        var data = new Array();
        for (let i = 0; i < arr.length; i++) {
            if (arr.get(i).checked==true) {
              data.push(arr.get(i).value);
            }
        }
        console.log(data);
        layer.confirm('确认要删除吗？',function(){
          //捉到所有被选中的，发异步进行删除
          $.ajax({
            type:"post",
            url:"{{url('/admin/todo_delgoods')}}",
            data: {id:data},
            dataType:"json",
            success:function(res){
              console.log(res);
              if (res.code==1) {
                getGoodData(1,window.layui.form);
                getCount();
                layer.msg(res.msg,{icon:1,time:1000});
              }else{
                layer.msg(res.msg,{icon:1,time:1000});
              }
            }
          })
        });
      }
    </script>
    <script>
        //提示功能
        function myAlert(msg) {
          $(".alert").html(msg).css({"background-color":"#41b314bb","border-color":"#3ca512bb"}).stop().fadeIn(500);
            setTimeout(function () {
              $(".alert").fadeOut(500);
          },2000)
        }
        var goodName = "";
        var classify_id = "";
        var start = "";
        var end = "";
        function searchItem(){
          var str = "";
          if (goodName!="") {
            str += goodName;
          }
          if (classify_id!="") {
            str += classify_id;
          }
          if (start!="") {
            str += start;
          }
          if (end!="") {
            str += end;
          }
          return str;
        }
        //重置分页的样式
        function resetpage(){
          //把span标签改成a标签
          var spans = $('.page-item span');
          for (let i = 0; i < spans.length; i++) {
            spans[i].outerHTML="<a href=''>"+spans[i].innerHTML+"</a>";
          }
          var arr = $(".page-item a");
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].innerHTML=="‹") {
              arr[i].className = "prev";
            }else if(arr[i].innerHTML=="›"){
              arr[i].className = "next";
            }
          }
          //将当前页设置为active
          $(".active a").attr("class","num active");
          //把li 上面的active 去除
          $("li.active").removeClass("active");
          //给页码a标签换类名
          $(".page-item .page-link").attr("class","num");
        }
        //请求接口获取某一页的数据
        function getGoodData(page,form,getstr=""){
            $.ajax({
                type:"get",
                url:"{{url('/admin/toget_good_list')}}",
                data:"page="+page+getstr,
                dataType:"html",
                success:function(res){
                  $(".list").html(res);
                  resetpage();
                  form.render();
                }
            })
          // }
        }
        //请求接口获取所有数据的条数
        function getCount(getstr=""){
          $.ajax({
              type:"get",
              url:"{{url('/admin/toget_good_count')}}",
              data:"p=1"+getstr,
              dataType:"text",
              success:function(res){
                $("#count").html("共有商品："+res+" 件");
              }
          })
        }
        layui.use('form', function(){
          var form = layui.form;
          //页面加载完要先请求第一页和第一次请求数据总数
          getGoodData(1,form);
          //是否推荐开关
          form.on('switch(recommand)', function(data){
            var changeto = data.elem.checked;
            var gid = data.elem.getAttribute("gid");
            if(changeto){//由off改成on
              $.ajax({
                  type:"get",
                  url:"{{url('/admin/tochange_recommand')}}",
                  data:"changeto=1&gid="+gid,
                  dataType:"json",
                  success:function(res){
                  //  console.log(res);
                    if(res.code==2){
                      $(".alert").html(res.msg).css({"background-color":"#41b314bb","border-color":"#3ca512bb"}).stop().fadeIn(500);
                        setTimeout(function () {
                          $(".alert").fadeOut(500);
                      },2000)
                      $(data.elem).siblings().removeClass("layui-form-onswitch").find("em").html("OFF");
                    }
                  }
              })
            }else{
              $.ajax({
                  type:"get",
                  url:"{{url('/admin/tochange_recommand')}}",
                  data:"changeto=2&gid="+gid,
                  dataType:"json",
                  success:function(res){
                  //  console.log(res);
                  }
              })
            }
          });
          //是否新品开关
          form.on('switch(isnew)', function(data){
            var changeto = data.elem.checked;
            var gid = data.elem.getAttribute("gid");
            if(changeto){//由off改成on
              $.ajax({
                  type:"get",
                  url:"{{url('/admin/tochange_isnew')}}",
                  data:"changeto=1&gid="+gid,
                  dataType:"json",
                  success:function(res){
                  //  console.log(res);
                  }
              })
            }else{
              $.ajax({
                  type:"get",
                  url:"{{url('/admin/tochange_isnew')}}",
                  data:"changeto=2&gid="+gid,
                  dataType:"json",
                  success:function(res){
                  //  console.log(res);
                  }
              })
            }
          });
          

          //搜索功能
          form.on("submit(sreach)",function (data) {
            // console.log(data.field);
            var data_obj = data.field;
            if (data_obj["start"]!="") {
              start = "&start="+data_obj["start"];
            }else{
              start = "";
            }
            if (data_obj["end"]!="") {
              end = "&end="+data_obj["end"];
            }else{
              end = "";
            }
            if (data_obj["classify_id"]!="") {
              classify_id = "&classify_id="+data_obj["classify_id"];
            }else{
              classify_id = "";
            }
            if (data_obj["good_name"]!="") {
              goodName = "&good_name="+data_obj["good_name"];
            }else{
              goodName = "";
            }
            var getstr = searchItem();
            $.ajax({
                type:"get",
                url:"{{url('/admin/toget_good_list')}}",
                data:"page=1"+getstr,
                dataType:"html",
                success:function(res){
                  $(".list").html(res);
                  resetpage();
                  getCount(getstr);
                  form.render();
                }
            })
            return false;
          })
          
          //点击页码请求接口
          $(document).on("click",".num",function () {
            var page = $(this).html();
            let condition = searchItem();
            getGoodData(page,form,condition);
            return false;
          })
          //点击上一页请求接口
          $(document).on("click",".prev",function () {
            var isdisable = $(this).parent(".disabled").length;
            var cur = $(".page-item").find(".active").html();
            if (isdisable) {
              $(".alert").html("这是梦开始的地方").css({"background-color":"#41b314bb","border-color":"#3ca512bb"}).stop().fadeIn(500);
                  setTimeout(function () {
                    $(".alert").fadeOut(500);
                },2000)
            }else{
              var page = parseInt(cur)-1
              let condition = searchItem();
              getGoodData(page,form,condition);
            }
            return false;
          })
          //点击下一页请求接口
          $(document).on("click",".next",function () {
            var isdisable = $(this).parent(".disabled").length;
            var cur = $(".page-item").find(".active").html();
            if (isdisable) {
              $(".alert").html("这里的故事等你来续写").css({"background-color":"#41b314bb","border-color":"#3ca512bb"}).stop().fadeIn(500);
              setTimeout(function () {
                $(".alert").fadeOut(500);
              },2000)
            }else{
              var page = parseInt(cur)+1
              let condition = searchItem();
              getGoodData(page,form,condition);
            }
            return false;
          })

          //全选功能
          form.on('checkbox(all)',function(data){
            var arr = $("input[name='id[]']");
            for (let i = 0; i < arr.length; i++) {
              arr.get(i).checked = data.elem.checked;
            }
            form.render('checkbox');
            // console.log(data.elem.checked=false);
          })
          form.on('checkbox(item)',function(data){
            var alllength = $("input[name='id[]']").length;
            var checkedlength = $("input[name='id[]']:checked").length;
            if (alllength==checkedlength) {
              $("input[name='all']").prop("checked", true);
            }else{
              $("input[name='all']").prop("checked", false);
            }
            form.render('checkbox');
            // console.log(data.elem.checked=false);
          })
        });
        getCount();
        
        // console.log(window);
        

    </script>
    <!-- <script type="text/javascript" src="/static/admin/lib/layui/layui.js" charset="utf-8"></script> -->
  </body>

</html>